<template>
  <div id="alarmAlert" v-show="jbShow">
    <div class="close" @click="closePane">×</div>
    <div class="title">报警提示</div>
    <div class="content">
      <div class="bjcontent">{{ name }}{{ content }}</div>
      <audio id="audio" src="./static/audio/alarmsound.mp3"></audio>
    </div>
  </div>
</template>
<script>
import { TUVector3,TUVector2,TURotator } from "tumap/dist/tumap.v1.8.js";

export default {
  data() {
    return {
      jbShow: false,
      count: 0,
      bjid: 0,
      name: "",
      content: "",
      alarmType: "",
      countArr: [],
      allEquipments: []
    };
  },
  mounted() {
    window.showAlarmAlert = this.alarmAlert;
    var temtreeData = JSON.parse(window.sessionStorage.getItem("treeData"));
    temtreeData&&this.treeForeach(temtreeData, (node) => {
      node.code && this.allEquipments.push(JSON.parse(JSON.stringify(node)));
    });
  },
  methods: {
    // 接收传送过来的信息
    alarmAlert(val) {
      let that = this;
      this.jbShow = val.show;
      this.name = val.name;
      this.content = val.content;
      this.alarmType = val.alarmType;
      this.count++;
      var code = val.code;
      if(code){
        for (let i = 0, len = this.allEquipments.length; i < len; i++) {
        if (code === this.allEquipments[i].code) {
          var temItem = {};
          temItem.x = this.allEquipments[i].position.x;
          temItem.y = this.allEquipments[i].position.y;
          temItem.z = this.allEquipments[i].position.z;
          window.Sgworld.focusOn( new TUVector3( temItem.x,
                temItem.y,
                temItem.z
              ),
              new TURotator(0, -10, 0),
              260,
              () => {},
              4
            );
          temItem.name =
            "报警管理-" +
            this.allEquipments[i].floorId +
            "-" +
            this.allEquipments[i].code;
          temItem.id =
            this.allEquipments[i].floorId + "_" + this.allEquipments[i].id;
          temItem.scale = 0.3;
          temItem.image = window.ipUrl + "qy/static/images/popups/alarm.png";
          // temItem.alertWindow = {
          //   //可选，点击弹窗
          //   url: `${window.ipUrl}qy/static/html/info.html?title=报警管理&position=展示中心大楼&name=${this.allEquipments[i].label}&floor=${this.allEquipments[i].floorId}&x=${this.allEquipments[i].position.x}&y=${this.allEquipments[i].position.y}&z=${this.allEquipments[i].position.z}&map=${window.Sgworld}`, //弹窗地址,并传递一些信息
          //   size: new TUVector2(1000, 1000), //弹窗大小
          //   offset: new TUVector2(0, -150), //弹窗位置，右：x正，下：y正
          // };
          window.Sgworld.createBillboard(temItem);
        }
      }
      }else{
        this.$message("暂无设备对应的code值！")
      }
      var newcolor = { r: 255, g: 0, b: 0, a: 1 };
      var params = {
        text: this.alarmType,
        id: this.count,
        color: newcolor,
        size: 1,
        location: new TUVector3(temItem.x, temItem.y, temItem.z),
      };
      this.countArr.push(this.count);
      window.Sgworld.execute("grapi", "CreatJingBao", params, null);
      //报警声音
      var audio = document.querySelector("#audio");
      audio.click();
      audio.play();
    },
    // 关闭弹窗
    closePane() {
      this.jbShow = false;
      this.countArr.forEach((element) => {
        window.Sgworld.execute(
          "grapi",
          "RemoveJingBao",
          { id: element },
          null
        );
      });
    },
        // 树的广度遍历
    treeForeach(tree, func) {
      let node, list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
  },
};
</script>
<style scoped>
#alarmAlert {
  margin: 0 auto;
  box-sizing: border-box;
  position: absolute;
  left: 42%;
  top: 900px;
  width: 672px;
  height: 257px;
  color: white;
  background: url("../../../static/images/popups/bjPane.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  transition: all 1.2s;
}
.bjlocate {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
  width: 40px;
  height: 40px;
  background: url("../../../static/images/popups/bjlocate.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* 右上角关闭按钮 */
.close {
  float: right;
  font-size: 50px;
  font-weight: 900;
  margin-right: 20px;
  margin-top: 10px;
  transition: all 1s;
}
.close:hover {
  transform: scale(1.1);
  color: red;
  cursor: pointer;
}
.content {
  box-sizing: border-box;
  width: 100%;
  padding: 100px;
}
.bjcontent {
  font-size: 36px;
  color: yellow;
}
.title {
  position: absolute;
  left: 40px;
  top: 30px;
  font-size: 32px;
  font-weight: 800;
}
</style>